<%@page import="com.wanmait.movies.vo.Actor"%>
<%@page import="com.wanmait.movies.vo.Director"%>
<%@page import="com.wanmait.movies.vo.MovieCountry"%>
<%@page import="com.wanmait.movies.vo.MovieType"%>
<%@page import="com.wanmait.movies.vo.MovieLanguage"%>
<%@page import="com.wanmait.movies.vo.Movie"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>
    <%String path =request.getContextPath(); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-3.5.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<style type="text/css">
	#circle{
	width:500px;
	margin:auto;
	
	}
	
	#movielist img {
	width:100px;
	height:100px;
	}
	#movielist a{
	color:red;
	text-decoration: none;
	}

	#movielist{
	width:700px;
	overflow:auto;
	height:370px;
	border: 2px solid gray;
	border-radius: 10px;
	margin-left:-100px;
	margin-top:20px;
	padding-left:30px;
	}
	
	.everymovie{
	width:120 px;
	float:left;
	margin-left:50px;
	margin-top:10px;
	text-align: center;
	}
	

	#modify{
	display:none;
	margin-top:20px;
	border: 2px solid gray;
	border-radius: 10px;
	padding:20px 10px;
	}
	
	#movieImageSpan img{
	width:120px;
	height:80px;
	
	}
	body{
	background-color: white;
	font-size: 15px;
	font-weight: bold;
	}
	#submit{
	width:100px;
	margin-left:200px;
	background-color: white;
	border-radius: 10px;
	}
	
	#movietext{
	border:2px solid gray;
	margin-left:10px;
	border-radius: 10px;
	}
	#movieinput{
	background-color: white;
	margin-left:10px;
	border-radius: 10px;
	}
	#movieName{
	border:2px solid gray;
	
	border-radius: 10px;
	}
	#movieShow{
	background-color: white;
	border:2px solid gray;
	
	border-radius: 10px;
	}

	#closeit{
	margin-left:95%;
	color:red;
	}
	.fenye{
	width:300px;
	height:30px;
	align-content: center;
	padding-left: 300px;
	margin-top: 320px;
	margin-left:-30px;
	}
	.ThisPage{
	width:30px;

	}
	</style>
    <script type="text/javascript" src="<%=path %>/ueditor/ueditor.config.js"></script>
  	<script type="text/javascript" src="<%=path %>/ueditor/ueditor.all.min.js"></script>
  	<script type="text/javascript" >
			         //在线编辑器
				     var editor;
			         $(function(){
			        	 var item ={initialFrameWidth:300,
			        			 initialFrameHeight:200,
			        			 toolbars:[['bold','fontfamily','fontsize','simpleupload','insertimage','emotion','forecolor','scrawl']],
			        			 };
			        	 editor =UE.getEditor("introduce",item);
			   
			         });
			         
			         
			  	</script>
	
	<script type="text/javascript">
		$(function(){
			$("#movieinput").click(function(){
				
				var movie =$("#movietext").val();
				$("#movielist").html("");
				$.ajax({
					url:"/movies/ManegerServlet?action=findDeleteMovie",
					async:false,
					type:"get",
					data:"movie="+movie,
					success:function(s){
						var movies = JSON.parse(s);
						
						for(var i=0;i<movies.length;i++){
							
							var divs =$("<div></div>");
							divs.addClass("everymovie");
							divs.attr("mid",movies[i].id);
							
							var imgs = $("<img >");
							imgs.attr("src","<%=path%>/images/"+movies[i].movieImage);
							divs.append(imgs);
							
							var br =$("<br>");
							divs.append(br);
							
							var sp =$("<span></span>");
							sp.html(movies[i].movieName);
							divs.append(sp);
							
							$("#movielist").append(divs);
					}			
					}
				});
			});
		})
		
		
		//给每个电影添加点击事件
		$(function(){
			$("#movielist").on("click",".everymovie",function(){
				var mid =$(this).attr("mid");
				
				$("#movielist").css("display","none");
				$.ajax({
					url:"/movies/ManegerServlet?action=getModifyMovie",
					async:false,
					type:"get",
					data:"mid="+mid,
					success:function(s){
						
						$("#modify").css("display","block");
						
						var m=JSON.parse(s);
						
						$("#hidden").val(mid);
						
						$("#movieName").val(m.movieName);
						$("#movieTime").val(m.movieTime);
						
						
						if(m.movieShow==true){
							$("#yesshow").prop("selected",true);
						}else if(m.movieShow==false){
							$("#noshow").prop("selected",true);
						}
						
						
						editor.ready(function(){
			        		 editor.setContent(m.movieIntroduction);
			        	 });
						var img = $("<img>");
						img.attr("src","<%=request.getContextPath()%>/images/"+m.movieImage);
						$("#movieImageSpan").append(img);
					}
				});
			});
		});
		$(function () {
			$("#movielist").on("click",".LastPage",function(){//上一页
				
				var thispage=$(".ThisPage").val();
				thispage--;
				if(thispage==""){
					thispage=1;
				}
				if(thispage>0){
					$.ajax({
						url:"/movies/ManegerServlet?action=pagedeletemovie",
						async:false,
						type:"get",
						data:"thispage="+thispage,
						success:function(s){
							$("#movielist").html(s);
							var div=$("<div></div>");
							var a1=$("<a href='javascript:' class='LastPage'>上一页</a>");
							var a2=$(" <input class='ThisPage'  type='text'  value="+thispage+" />");
							var a3=$("<a href='javascript:' class='NextPage' pagemax='<%=request.getAttribute("pagemax")%>'>下一页</a>");
							var a4=$("<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;共(<%=request.getAttribute("pagemax") %>)页</span>");
						    div.append(a1);
						    div.append(a2);
						    div.append(a3);
						    div.append(a4);
							div.addClass("fenye");
						$("#movielist").append(div);
						}
					})
				}
			});
		});
		$(function () {
			$("#movielist").on("click",".NextPage",function(){//下一页
				var thispage=$(".ThisPage").val();
				var pagemax=$(".NextPage").attr("pagemax");
				      thispage++;
				     
				      if(thispage==""){
							thispage=1;
						}
				if(thispage<=pagemax){
					$.ajax({
						url:"/movies/ManegerServlet?action=pagedeletemovie",
						async:false,
						type:"get",
						data:"thispage="+thispage,
						success:function(s){
							$("#movielist").html(s);
							var div=$("<div></div>");
							var a1=$("<a href='javascript:' class='LastPage'>上一页</a>");
							var a2=$(" <input class='ThisPage'  type='text'  value="+thispage+" />");
							var a3=$("<a href='javascript:' class='NextPage' pagemax='<%=request.getAttribute("pagemax")%>'>下一页</a>");
							var a4=$("<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;共(<%=request.getAttribute("pagemax") %>)页</span>");
						    div.append(a1);
						    div.append(a2);
						    div.append(a3);
						    div.append(a4);
							div.addClass("fenye");
						$("#movielist").append(div);
						}
					})
				}
				});
		});
		$(function () {//回车事件
			$("#movielist").on("keydown",".ThisPage",function(e){
				var thispage=$(".ThisPage").val();
				var pagemax=$(".NextPage").attr("pagemax");
				if(thispage==""){
					thispage=1;
				}
				var h=e||window.event;
				if(h.which=="13"){
					if(thispage<=pagemax){
						$.ajax({
							url:"/movies/ManegerServlet?action=pagedeletemovie",
							async:false,
							type:"get",
							data:"thispage="+thispage,
							success:function(s){
								$("#movielist").html(s);
								var div=$("<div></div>");
								var a1=$("<a href='javascript:' class='LastPage'>上一页</a>");
								var a2=$(" <input class='ThisPage'  type='text'  value="+thispage+" />");
								var a3=$("<a href='javascript:' class='NextPage' pagemax='<%=request.getAttribute("pagemax")%>'>下一页</a>");
								var a4=$("<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;共(<%=request.getAttribute("pagemax") %>)页</span>");
							    div.append(a1);
							    div.append(a2);
							    div.append(a3);
							    div.append(a4);
								div.addClass("fenye");
							$("#movielist").append(div);
							}	
						})
					}
				}
				})
		});
		
		$(function () {
			$("#movielist").on("blur",".ThisPage",function(){//这是text查找页数的
				var thispage=$(".ThisPage").val();
				var pagemax=$(".NextPage").attr("pagemax");
				if(thispage==""){
					thispage=1;
				}
				if(thispage<=pagemax){
					$.ajax({
						url:"/movies/ManegerServlet?action=pagedeletemovie",
						async:false,
						type:"get",
						data:"thispage="+thispage,
						success:function(s){
							$("#movielist").html(s);
							var div=$("<div></div>");
							var a1=$("<a href='javascript:' class='LastPage'>上一页</a>");
							var a2=$(" <input class='ThisPage'  type='text'  value="+thispage+" />");
							var a3=$("<a href='javascript:' class='NextPage' pagemax='<%=request.getAttribute("pagemax")%>'>下一页</a>");
							var a4=$("<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;共(<%=request.getAttribute("pagemax") %>)页</span>");
						    div.append(a1);
						    div.append(a2);
						    div.append(a3);
						    div.append(a4);
							div.addClass("fenye");
						$("#movielist").append(div);
						}
					})
				}
				

		});
		
		$(function(){
			$("#closeit").click(function(){
				$("#modify").css("display","none");
				$("#movielist").css("display","block")
			})

			})
			
		});
		
		
		$(function () {
			$("#movietext").focus(function(){
				$("#movietext").val("");
				$.ajax({
					url:"/movies/ManegerServlet?action=pagedeletemovie",
					async:false,
					type:"get",
					data:"thispage=1",
					success:function(s){
						$("#movielist").html(s);
						var div=$("<div></div>");
						var a1=$("<a href='javascript:' class='LastPage'>上一页</a>");
						var a2=$(" <input class='ThisPage'  type='text'  value=1 />");
						var a3=$("<a href='javascript:' class='NextPage' pagemax='<%=request.getAttribute("pagemax")%>'>下一页</a>");
						var a4=$("<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;共(<%=request.getAttribute("pagemax") %>)页</span>");
					    div.append(a1);
					    div.append(a2);
					    div.append(a3);
					    div.append(a4);
						div.addClass("fenye");
					$("#movielist").append(div);
					}
				})
				});
		});
		
		
		//上传图片预览
		function getObjectURL(file) {
		  var url = null ;
		  if (window.createObjectURL!=undefined) 
		  { // basic
		   url = window.createObjectURL(file) ;
		  }
		  else if (window.URL!=undefined) 
		  {
		   // mozilla(firefox)
		   url = window.URL.createObjectURL(file) ;
		  } 
		  else if (window.webkitURL!=undefined) {
		   // webkit or chrome
		   url = window.webkitURL.createObjectURL(file) ;
		  }
		  return url ;
	 }
	
	$(function(){
		$("#movieImage").click(function () {
			$("#movieImage").on("change",function(){
				var objUrl = getObjectURL(this.files[0]) ;
				 console.log("objUrl = "+objUrl) ;
				 $("#movieImageSpan").html("");
				var img =$("<img src="+objUrl+">");
				$("#movieImageSpan").append(img);
			})
			
		});
	});
	
		
	</script>
</head>
<body>
<div id="circle">

	<div style="margin-top:20px;text-align:center;">
		电影名<input type="text" id="movietext"> <input type="button" value="搜索" id="movieinput">
	</div>
	
	<!-- 电影列表 -->
	<div id="movielist">
		
 		
 		<% ArrayList<Movie> movieList =(ArrayList<Movie>)request.getAttribute("movieList"); %>
 		<%for(Movie movie:movieList){ %>
 			
 			<div class="everymovie" mid="<%=movie.getId()%>">
 			    <img src ="<%=request.getContextPath()%>/images/<%=movie.getMovieImage()%>"><br>
 				<br><span><%=movie.getMovieName()%></span>
 			</div>
 		<%} %>
  		<div class="fenye"><!-- 分页查询 -->
          <a href="javascript:" class="LastPage">上一页</a>
          <input class="ThisPage"  type="text"  value="<%=request.getAttribute("thispage") %>" />
          <a href="javascript:" class="NextPage" pagemax="<%=request.getAttribute("pagemax")%>">下一页</a>
          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;共(<%=request.getAttribute("pagemax") %>)页</span>
       </div> 	
	</div>
	
	<!-- 修改的电影 -->
	<div id="modify">
		<span id="closeit">x</span>
		<form method="post" action="<%=path %>/ManegerServlet?action=modifyMovie" enctype="multipart/form-data">
			&emsp;电影名:&emsp;<input type="text" name="movieName" id="movieName"><br><br>
							 <input type="hidden" name="movieId" id ="hidden" >
			是否热映:&emsp;<select name="movieShow" id="movieShow">
				<option value="1" id="yesshow">是</option >
				<option value="0" id= "noshow">否</option >	
	              </select> <br><br>
	        &emsp;缩略图:&emsp;<input type=file id="movieImage" name="movieImage"><span id="movieImageSpan"></span><br><br>
	         
	                        简&emsp;&emsp;介: 
	           <br>
	     	   <br><textarea id = "introduce" name="movieIntroduce" style="margin-left: 80px;">
			  
			  	
			    </textarea><br><br> 
			    <input type=submit value=修改 id=submit>
	
		</form>
	
	</div>
	</div>
</body>
</html>